<%@ page contentType="text/html; charset=utf-8" %>
<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no"/>
    <style type="text/css">
        body, html, #allmap {
            width: 100%;
            height: 100%;
            overflow: hidden;
            margin: 0;
            font-family: "微软雅黑";
        }
    </style>
    <script type="text/javascript" src="//api.map.baidu.com/api?v=2.0&ak=ndvWNTLAdZGvbDXTRTHvrPKafCO4DedQ"></script>
    <title>城市列表控件</title>
</head>
<body>
<%--
<iframe width="1000" scrolling="no" height="15" frameborder="0" allowtransparency="true"
src="//i.tianqi.com/index.php?c=code&id=11&color=%2300B0F0&bgc=%23&bdc=%23&icon=4&py=shunyi&site=13"></iframe>
--%>
<div id="allmap"></div>
</body>
</html>
<script type="text/javascript">
    //定义地图
    var mp = new BMap.Map("allmap");
    var point = new BMap.Point(116.404, 39.915);
    mp.centerAndZoom(point, 14);
    //添加地图和卫星图
    mp.addControl(new BMap.MapTypeControl({
        mapTypes: [
            BMAP_NORMAL_MAP,
            BMAP_HYBRID_MAP
        ]
    }));


    //添加城市
    mp.enableScrollWheelZoom();
    mp.enableInertialDragging();
    mp.enableContinuousZoom();

    var size = new BMap.Size(200, 15);
    mp.addControl(new BMap.CityListControl({
        anchor: BMAP_ANCHOR_TOP_LEFT,
        offset: size,
        // 切换城市之前事件
        // onChangeBefore: function(){
        //    alert('before');
        // },
        // 切换城市之后事件
        // onChangeAfter:function(){
        //   alert('after');
        // }
    }));


    //添加右下角缩略图控件
    var overViewOpen = new BMap.OverviewMapControl({isOpen: true, anchor: BMAP_ANCHOR_BOTTOM_RIGHT});
    mp.addControl(overViewOpen);      //右下角，打开


    // 添加带有定位的导航控件
    var navigationControl = new BMap.NavigationControl({
        // 靠左上角位置
        anchor: BMAP_ANCHOR_TOP_LEFT,
        // LARGE类型
        type: BMAP_NAVIGATION_CONTROL_LARGE,
        // 启用显示定位
        enableGeolocation: true
    });
    mp.addControl(navigationControl);
    // 添加定位控件
    var geolocationControl = new BMap.GeolocationControl();
    geolocationControl.addEventListener("locationSuccess", function (e) {
        // 定位成功事件
        var address = '';
        address += e.addressComponent.province;
        address += e.addressComponent.city;
        address += e.addressComponent.district;
        address += e.addressComponent.street;
        address += e.addressComponent.streetNumber;
        alert("当前定位地址为：" + address);
    });
    geolocationControl.addEventListener("locationError", function (e) {
        // 定位失败事件
        alert(e.message);
    });
    mp.addControl(geolocationControl);


    var top_left_control = new BMap.ScaleControl({anchor: BMAP_ANCHOR_TOP_LEFT});// 左上角，添加比例尺

    //var top_right_navigation = new BMap.NavigationControl({anchor: BMAP_ANCHOR_TOP_RIGHT, type: BMAP_NAVIGATION_CONTROL_SMALL}); //右上角，仅包含平移和缩放按钮
    //添加控件和比例尺

    mp.addControl(top_left_control);
    //mp.addControl(top_right_navigation);

    //跳动的动画
    var marker = new BMap.Marker(point);  // 创建标注
    map.addOverlay(marker);               // 将标注添加到地图中
    marker.setAnimation(BMAP_ANIMATION_BOUNCE); //跳动的动画
</script>